<template>
  <div id="back">
    <div id="picture">
    </div>
    <div id="passage">
      <div id="login">
        <br><br>
        <h2>登录</h2>
        <br>
        <form action="#">
            <el-input placeholder="邮箱" prefix-icon="" v-model="email" @blur="emailBlur" ></el-input>
            <span style="font-size: 7px;color: red">{{this.emailAlertMessage}}</span>
            <el-input placeholder="密码" prefix-icon="" v-model="password" type="password" show-password></el-input>
            <span style="font-size: 7px;color: red">{{this.passwordAlertMessage}}</span>
            <router-link to="/forget_password">  忘记密码?</router-link>
          <!-- <div style="text-align: left;margin-left: 15%">
            邮箱：<el-input id="email-input" type="email" placeholder="Email" required="" v-model="email" @blur="emailBlur" style="width: 200px"></el-input><span style="font-size: 7px;color: red">{{this.emailAlertMessage}}</span>
          </div>
          <br>
          <div style="text-align: left;margin-left: 15%">
            密码：<el-input type="Password" placeholder="Password" required="" style="width: 200px" show-password v-model="password"></el-input>
            <span style="font-size: 7px;color: red">{{this.passwordAlertMessage}}</span> -->
            
          <!-- </div> -->
          <br>
          <br>
          <button type="button" @click="login" class="bu" id="but"> 登录 </button>
        </form>
        <p class="account">如果您现在还没有账号，请先<router-link to="/register">注册</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Email",
  data() {
    return {
      email: '',
      emailAlertMessage: '',
      isEmail: false,
      password:'',
      passwordAlertMessage:'',
    }
  },
  methods:{
    login(){
      console.log("button login")
      /*this.$store.commit("login")
      this.$cookies.set("login",true,'7d');
      console.log("set cookie succsess?");*/
      if(this.isEmail){
        this.axios({
          method: "post",
          url:'/login',
          data:{
            email:this.email,
            password:this.password,
          },
        })
        .then(response=>{
          if(response.data.res==true){
            console.log('登陆成功');
            this.$store.commit("login",response.data.user.username,this.email,this.password);
            // this.$cookies.set("email",this.email,'7d');
            // this.$cookies.set("password",this.password,'7d');
            this.$router.push('/');
          }
          else{
            this.$alert(response.data.message,"登录失败",{
              confirmButtonText: '确定',
            }
            );
            console.log('登陆失败');
            console.log(response.data.message);
            console.log("-----------------------------------");
            if(response.data.message=="该邮箱不存在! "){
              this.emailAlertMessage=response.data.message;
            }
            else if(response.data.message=='密码输入错误! '){
              this.passwordAlertMessage==response.data.message;
            }
          }
        })
        .catch(error=>{
          console.log(error);
        })
      }
      else{
        if(this.email==''||this.email==null){
          const element = document.querySelector('.email-input');
          element.classList.add('animate__animated', 'animate__bounceOutLeft');
        }
      }
    },
    emailBlur() {
      var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
      if(this.email==''){
        this.emailAlertMessage="";
      }
      else if (!verify.test(this.email)) {
        this.emailAlertMessage = '邮箱格式错误';
        this.isEmail = false;
      } else {
        this.isEmail = true;
        this.emailAlertMessage='';
      }
    },

  }
}

</script>

<style scoped>
@import "../css/submit.css";
</style>